<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      html,
      body,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
  </style>
</head>
<body>
<canvas id="canvas">
</canvas>
<script>
    const icons = ['abc', 'cbc', 'cmbc', 'icbc', 'cbc1']
    let json = {}
    const offset = 5
    const size = 48
    const canvas = document.getElementById('canvas')
    canvas.width = 200
    canvas.height = (offset + size) * icons.length - offset
    const ctx = canvas.getContext('2d')
    let promises = []
    icons.forEach((item, index) => {
        const y = index * (offset + size);
        const x = 0;
        const img = new Image();
        img.src = `icons/${item}.png`;
        promises.push(new Promise(resolve => {
            img.onload = () => {
                json[item] = {
                    "x": x,
                    "y": y,
                    "width": img.width,
                    "height": img.height,
                    "pixelRatio": 1,
                    "visible": "true"
                }
                ctx.drawImage(img, x, y)
                resolve(item)
            }
        }))

    })
    Promise.all(promises).then(res => {
        console.log(JSON.stringify(json))
    })
</script>
</body>
</html>